/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useEffect, useState } from 'react';
import { Modal, Row, Table, Col } from 'antd';
import { getYzDetailInSeven } from '@/services/chartData';
import styles from './index.less';

const columns = [
  {
    title: '日期',
    dataIndex: 'date',
    key: 'date',
  },
  {
    title: '入库',
    dataIndex: 'in_num',
    key: 'in_num',
  },
  {
    title: '出库',
    dataIndex: 'out_num',
    key: 'out_num',
  },
  {
    title: '收寄量',
    dataIndex: 'order_num',
    key: 'order_num',
  },
];

const Index = ({ cm_id, visible, onClose, token }) => {
  const [list, setList] = useState([]);
  const [info, setInfo] = useState({});
  const [loading, setLoading] = useState(false);

  useEffect(
    () => {
      if (cm_id) {
        setLoading(true);
        getYzDetailInSeven({ cm_id, token })
          .then((res = {}) => {
            if (res.code == 0) {
              const { data: tableData, inn_name, concat_name, concat_phone, concat_location } =
                res.data || {};
              setList(tableData);
              setInfo({
                inn: inn_name,
                name: concat_name,
                mobile: concat_phone,
                address: concat_location,
              });
            }
            setLoading(false);
          })
          .catch(() => {
            setLoading(false);
          });
      }
    },
    [cm_id],
  );

  return (
    <Modal
      width={700}
      className={styles['inn-modal']}
      centered
      title={info.inn}
      visible={visible}
      onCancel={onClose}
      footer={false}
    >
      <Row gutter={[20, 20]} style={{ fontSize: 16 }}>
        <Col>{info.address}</Col>
        <Col>
          {info.name} {info.mobile}
        </Col>
      </Row>
      <Table
        rowKey="date"
        loading={loading}
        columns={columns}
        dataSource={list}
        pagination={false}
      />
    </Modal>
  );
};

export default Index;
